<template>
  <div class="section-box">
    <FrameLayout>
      <template v-slot:left>
        <Frame
          title="矿井上下水文监测"
          style="height: 39%"
        >
          <template v-slot:right>
            <div class="flex-row">
              <img
                class="more-icon"
                src="@/assets/img/rightIcon.png"
                alt=""
                srcset=""
                @click="onClickValue('watermonit')"
              >
            </div>
          </template>
          <template v-slot:body>
            <WaterMonit />
          </template>
        </Frame>
      </template>
      <template v-slot:center>
        <div class="side-bars">
          <TwoThree />
          <div class="btn" @click="$store.dispatch('dlgName','井下通知')">井下通知</div>
        </div>
        <Dlgdiv v-if="$store.getters.dlgName === '井下通知'" mask style="width: 40%;height: 58%;left: 28%;top: 20%">
          <template v-slot:title>井下通知</template>
          <template v-slot:body><DlgNotice /></template>
        </Dlgdiv>
      </template>
      <template v-slot:right>
        <Frame title="监测报警" style="height: 30%">
          <template v-slot:body>
            监测报警
          </template>
        </Frame>
      </template>
    </FrameLayout>
    <Dialog v-if="this.$store.getters.dlgShow && dlgName === 'watermonit'">
      <template slot="body">
        <SpringFrame>
          <template #title>
            <div class="flex-row scope">
              <div
                v-for="(item, index) in waterTitleList"
                :key="index"
                class="flex-center mt timeChange"
                :class="{ active: item.name == waterTitleName }"
                @click="WaterTitleChange(item.name)"
              >
                <span>{{ item.title }}</span>
              </div>
            </div>
          </template>
          <template #body>
            <keep-alive>
              <component :is="waterTitleName" />
            </keep-alive>
          </template>
        </SpringFrame>
      </template>
    </Dialog>
  </div>
</template>
<script>
import DlgNotice from '@/views/components/DlgNotice'
import WaterMonit from './WaterMonit'
import SpringFrame from './SpringFrame'
import WaterFrame from './waterMonit/WaterFrame'
import WaterFlow from './waterMonit/WaterinFlow'
import DrainageMonitors from './waterMonit/DrainageMonitors'
export default {
    name: 'Risk',
    components: {
        WaterMonit,
        SpringFrame,
        WaterFrame,
        DrainageMonitors,
        WaterFlow,
        DlgNotice
    },
    // mixins: [poiWater],
    data() {
        return {
            dlgName: '',
            dlgDate: null,
            poiType: 'water',
            isShowslot: 'DrainageAnalysis',
            waterTitleName: 'WaterFlow',
            waterTitleList: [
                {
                    name: 'WaterFlow',
                    title: '长观孔'
                },
                {
                    name: 'WaterFrame',
                    title: '井下水文'
                },

                {
                    name: 'DrainageMonitors',
                    title: '密闭墙'
                }
            ]
        }
    },
    beforeDestroy() {

    },
    created() {
    },
    methods: {

        change(e) {
            this.isShowslot = e
        },
        WaterTitleChange(e) {
            this.waterTitleName = e
        },
        onClickValue(val) {
            this.dlgName = val
            this.$store.dispatch('dlgShow', true)
        }

    }
}
</script>

<style lang="scss" scoped>
.section-box {
  width: 100%;
  height: 100%;
}

.todayscope .scope {
  padding-left: 10px;
}

.scope {
  position: relative;
  height: 100%;
}

.timeChange:nth-child(2) {
  margin: -39px 30px 0 30px;
}

.mt.timeChange {
  margin-top: -39px;
}

.timeChange {
  //min-width: 140px;
  height: 100%;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}

.active {
  background: url("~@/assets/img/fireTable.png") no-repeat;
  background-size: 100% 100%;
}

::v-deep .el-dialog__wrapper .el-dialog {
  height: 80%;
}

.translate {
  transition: all 0.4s;
}

.rightImg {
  width: 77px;
  height: 26px;
  opacity: 1;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
